﻿<!DOCTYPE html>
<html lang="en">
<head>        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />    
    <!--[if gt IE 8]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />        
    <![endif]-->                
    <title>Editable Tables - Leo - Premium Admin Template</title>
    <link rel="icon" type="image/ico" href="favicon.ico"/>
    
    <link href="../css/stylesheets.css" rel="stylesheet" type="text/css" />
    
    <!--[if lte IE 7]>
        <script type='text/javascript' src='../js/other/lte-ie7.js'></script>
    <![endif]-->    
    
    <script type='text/javascript' src='../js/jquery/jquery-2.0.0.min.js'></script>
    <script type='text/javascript' src='../js/jquery/jquery-ui-1.10.3.custom.min.js'></script>
    <script type='text/javascript' src='../js/jquery/jquery-migrate-1.1.1.min.js'></script>
    <script type='text/javascript' src='../js/jquery/globalize.js'></script>
    
    <script type='text/javascript' src='../js/bootstrap/bootstrap.min.js'></script>    
    <script type='text/javascript' src='../js/cookies/jquery.cookies.2.2.0.min.js'></script>
    
    <script type='text/javascript' src='../js/datatables/jquery.dataTables.min.js'></script>   
    <script type='text/javascript' src='../js/scrollup/jquery.scrollUp.min.js'></script>
    
    <script type='text/javascript' src='../js/other/table_edit.js'></script>    
    
    <script type='text/javascript' src='../js/plugins.js'></script>    
    <script type='text/javascript' src='../js/actions.js'></script>
</head>
<body>    
    
    <div id="wrapper">
        
        <div id="header">
            
            <div class="wrap">
                
                <a href="index.html" class="logo"></a>
                
                <div class="buttons fl">
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small c_layout">
                            <span class="i-layout-8"></span>                            
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small c_screen">
                            <span class="i-stretch"></span>                            
                        </a>
                    </div>                    
                </div>
                
                <div class="buttons">
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small">
                            <span class="i-cog"></span>
                        </a>
                        <div class="popup">
                            <div class="head">
                                <h2>Settings</h2>
                            </div>
                            <div class="content np">      
                                <div class="row-fluid">
                                    <div class="controls-row">
                                        <div class="span3">Themes:</div>
                                        <div class="span9 themes">
                                            <a href="#" class="default tip" data-theme="" title="Default"></a>
                                            <a href="#" class="dark tip" data-theme="themeDark" title="Dark"></a>
                                            <a href="#" class="simple tip" data-theme="themeSimple" title="Simple"></a>
                                            <div class="help-block">On click theme will changed and saved settings</div>
                                        </div>
                                    </div>               
                                    <div class="controls-row">
                                        <div class="span3">Backgrounds:</div>
                                        <div class="span9 backgrounds">
                                            <a href="#" class="default tip" data-theme="" title="Default"></a>                                            
                                            <a href="#" class="b_bcrosshatch" data-back="b_bcrosshatch"></a>
                                            <a href="#" class="b_crosshatch" data-back="b_crosshatch"></a>
                                            <a href="#" class="b_cube" data-back="b_cube"></a>
                                            <a href="#" class="b_dots" data-back="b_dots"></a>
                                            <a href="#" class="b_grid" data-back="b_grid"></a>
                                            <a href="#" class="b_hline" data-back="b_hline"></a>
                                            <a href="#" class="b_simple" data-back="b_simple"></a>
                                            <a href="#" class="b_vline" data-back="b_vline"></a>
                                            <div class="help-block">On click background will changed and saved settings</div>
                                        </div>
                                    </div>                                    
                                </div>
                            </div>
                            <div class="footer">
                                <div class="side fr">
                                    <button class="btn btn-primary popup-close">Close</button>
                                </div>                                
                            </div>
                        </div>                        
                    </div>
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small">
                            <span class="i-chat"></span>
                        </a>
                        <div class="popup">
                            <div class="head">
                                <h2>Messages</h2>
                            </div>
                            <div class="content npb messages minify" id="messages"></div>
                            <div class="footer">
                                <div class="side fl">
                                    <button class="btn btn-link">Show all</button>
                                </div>
                                <div class="side fr">
                                    <button class="btn btn-primary popup-close">Close</button>
                                </div>                                
                            </div>
                        </div>                        
                    </div>
                    <div class="item">                        
                        <div class="btn-group">                        
                            <a href="#" class="btn btn-primary btn-small dropdown-toggle" data-toggle="dropdown">
                                <span class="i-forward"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="i-profile"></span> Profile</a></li>
                                <li><a href="#"><span class="i-tools"></span> Controls</a></li>                                
                                <li><a href="#"><span class="i-locked"></span> Lock</a></li>
                                <li><a href="#"><span class="i-forward"></span> Logout</a></li>
                            </ul> 
                        </div>
                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
        <div id="layout">
        
            <div id="sidebar">

                <div class="user">
                    <div class="pic">
                        <img src="img/examples/users/dmitry_m.jpg"/>
                    </div>
                    <div class="info">
                        <div class="name">
                            <a href="#">John Doe</a>
                        </div>
                        <div class="buttons">
                            <a href="#"><span class="i-cog"></span> Settings</a>
                            <a href="#"><span class="i-chat"></span> Messages</a>
                            <a href="#" class="fr"><span class="i-forward"></span> Logout</a>
                        </div>
                    </div>
                </div>

                <ul class="navigation">
                    <li>
                        <a href="index.html">Dashboard</a>
                    </li>
                    <li class="openable">
                        <a href="#">UI Elements</a>
                        <ul>
                            <li>
                                <a href="ui_elements.html">Elements</a>
                            </li>
                            <li>
                                <a href="ui_widgets.html">Widgets</a>
                            </li>
                            <li>
                                <a href="ui_buttons.html">Buttons</a>
                            </li>
                            <li>
                                <a href="ui_icons.html">Icons</a>
                            </li>
                            <li>
                                <a href="ui_grid.html">Grid system</a>
                            </li>                        
                        </ul>
                    </li> 
                    <li class="openable">
                        <a href="#">Form Stuff</a>
                        <ul>
                            <li>
                                <a href="form_elements.html">Form elements</a>
                            </li>                            
                            <li>
                                <a href="form_validation.html">Form validation</a>
                            </li>                                                        
                            <li>
                                <a href="form_wizard.html">Wizard</a>
                            </li>
                            <li>
                                <a href="form_wysiwyg.html">WYSIWYG</a>
                            </li>
                            <li>
                                <a href="form_code_editor.html">Code editor</a>
                            </li>
                        </ul>                        
                    </li>                
                    <li>
                        <a href="messages.html">Messages</a>
                    </li>                                
                    <li>
                        <a href="charts.html">Charts</a>
                    </li>                                   
                    <li class="openable open">                        
                        <a href="tables.html">Tables</a>
                        <ul>
                            <li>
                                <a href="tables_default.html">Default tables</a>
                            </li>
                            <li>
                                <a href="tables_sort.html">Sorting tables</a>
                            </li>
                            <li class="active">
                                <a href="tables_edit.html">Editable tables</a>
                            </li>
                        </ul>
                    </li>           
                    <li>
                        <a href="typography.html">Typography</a>                       
                    </li>
                    <li>
                        <a href="files.html">File handling</a>                       
                    </li>
                    <li>
                        <a href="calendar.html">Calendar</a>                       
                    </li>                    
                    <li class="openable">
                        <a href="#">Maps</a>
                        <ul>
                            <li>
                                <a href="maps_vector.html">Vector maps</a>
                            </li>
                            <li>
                                <a href="maps_google.html">Google maps</a>
                            </li>                            
                        </ul>
                    </li>                    
                    <li class="openable">
                        <a href="#">Sample Pages</a>
                        <ul>
                            <li>
                                <a href="sample_login.html">Login</a>
                            </li>     
                            <li>
                                <a href="sample_user_edit.html">User edit</a>
                            </li>      
                            <li>
                                <a href="sample_search.html">Search result</a>
                            </li>               
                            <li>
                                <a href="sample_faq.html">FAQ</a>
                            </li>                     
                            <li>
                                <a href="sample_mailbox.html">Mailbox</a>
                            </li>
                            <li>
                                <a href="sample_invoice.html">Invoice</a>
                            </li>
                            <li>
                                <a href="sample_gallery.html">Gallery</a>
                            </li>                            
                            <li>
                                <a href="sample_blank.html">Blank page</a>
                            </li>      
                            <li>
                                <a href="sample_price.html">Pricing table</a>
                            </li>
                            <li>
                                <a href="sample_payment.html">Payment table</a>
                            </li>                            
                            <li class="openable">
                                <a href="#">Error pages</a>
                                <ul>
                                    <li><a href="sample_error_403.html">Error 403 forbidden</a></li>
                                    <li><a href="sample_error_404.html">Error 404 not found</a></li>
                                    <li><a href="sample_error_503.html">Error 503 service unavailable</a></li>
                                </ul>
                            </li>                            
                        </ul>
                    </li>                        
                    <li class="openable">
                        <a href="#" class="icon"><span class="i-star text-info"></span>Navigation samples<span class="label label-important fr">+6</span></a>
                        <ul>
                            <li><a href="#" class="icon"><span class="i-battery text-error"></span>Second level<span class="label label-info fr">$35,224</span></a></li>                            
                            <li class="openable">
                                <a href="#" class="icon"><span class="i-cart text-success"></span>Second level<span class="label label-important fr">+3</span></a>
                                <ul>
                                    <li><a href="#" class="icon"><span class="i-film"></span>Third level<span class="label label-info fr">3</span><span class="label label-success fr">2</span><span class="label fr">1</span></a></li>
                                    <li class="active"><a href="#" class="icon"><span class="i-cube text-info"></span>Active third level<span class="label label-info fr">3</span><span class="label label-info fr">2</span><span class="label label-info fr">1</span></a></li>
                                    <li><a href="#" class="icon"><span class="i-info"></span>Third level<span class="label label-warning fr">3</span><span class="label label-important fr">2</span><span class="label fr">1</span></a></li>
                                </ul>
                            </li>                            
                            <li><a href="#" class="icon"><span class="i-box text-warning"></span>Second level<span class="label label-success fr">$1989.02</span></a></li>
                        </ul>
                    </li>                     
                </ul>

            </div>

            <div id="content">  
                
                <div class="wrap">                    
                    
                    <div class="head">
                        <div class="info">
                            <h1>Editable Tables</h1>
                            <ul class="breadcrumb">
                                <li><a href="#">Dashboard</a> <span class="divider">-</span></li>                                
                                <li><a href="#">Tables</a> <span class="divider">-</span></li>                                
                                <li class="active">Editable tables</li>
                            </ul>
                        </div>
                        
                        <div class="search">
                            <form action="" method="post">
                                <input type="text" placeholder="search..."/>                                
                                <button type="submit"><span class="i-calendar"></span></button>
                                <button type="submit"><span class="i-magnifier"></span></button>
                            </form>
                        </div>                        
                    </div>                                                                    
                    
                    <div class="content">
                        
                        <div class="row-fluid">
                            <div class="span12">
                                
                                <div class="alert alert-info">
                                    Check documentation to get more information about saving data!
                                    <button type="button" class="close" data-dismiss="alert">×</button>
                                </div>
                                
                                <div class="block">
                                    <div class="head">
                                        <h2>Default editing(dblclick on row)</h2>                                     
                                    </div>
                                    <div class="content np">
                                     
                                        <table cellpadding="0" cellspacing="0" width="100%" class="editable">
                                            <thead>
                                                <tr>                                                    
                                                    <th width="50">ISO2</th>
                                                    <th width="50">ISO3</th>
                                                    <th>Name</th>                                                    
                                                    <th width="100">Region</th>                                    
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>                                                    
                                                    <td>AD</td>
                                                    <td>AND</td>
                                                    <td>Andorra</td>
                                                    <td>Europe</td>                                    
                                                </tr>
                                                <tr>                                                    
                                                    <td>AR</td>
                                                    <td>ARG</td>
                                                    <td>Argentina</td>
                                                    <td>USA</td>                                    
                                                </tr>
                                                <tr>                                                    
                                                    <td>BG</td>
                                                    <td>BGR</td>
                                                    <td>Bulgaria</td>
                                                    <td>Europe</td>                                    
                                                </tr>
                                                <tr>                                                                                                        
                                                    <td>BR</td>
                                                    <td>BRA</td>
                                                    <td>Brazil</td>
                                                    <td>USA</td>                                    
                                                </tr>
                                                <tr>                                                    
                                                    <td>CA</td>
                                                    <td>CAN</td>
                                                    <td>Canada</td>
                                                    <td>USA</td>                                    
                                                </tr>                               
                                            </tbody>
                                        </table>                                         
                                        
                                    </div>
                                </div>
                                
                                <div class="block">
                                    <div class="head">
                                        <h2>Editing all row</h2>                                       
                                    </div>
                                    <div class="content np">
                                     
                                        <table cellpadding="0" cellspacing="0" width="100%" class="editable oc_disable">
                                            <thead>
                                                <tr>                                                    
                                                    <th width="50">ISO2</th>
                                                    <th width="50">ISO3</th>
                                                    <th>Name</th>                                                    
                                                    <th width="100">Region</th>
                                                    <th width="50">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>                                                    
                                                    <td>AD</td>
                                                    <td>AND</td>
                                                    <td>Andorra</td>
                                                    <td>Europe</td>                                    
                                                    <td><button class="btn btn-mini btn-primary btn-block edit">Edit</button></td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>AR</td>
                                                    <td>ARG</td>
                                                    <td>Argentina</td>
                                                    <td>USA</td>                                    
                                                    <td><button class="btn btn-mini btn-primary btn-block edit">Edit</button></td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>BG</td>
                                                    <td>BGR</td>
                                                    <td>Bulgaria</td>
                                                    <td>Europe</td>                                    
                                                    <td><button class="btn btn-mini btn-primary btn-block edit">Edit</button></td>
                                                </tr>
                                                <tr>                                                                                                        
                                                    <td>BR</td>
                                                    <td>BRA</td>
                                                    <td>Brazil</td>
                                                    <td>USA</td>                                    
                                                    <td><button class="btn btn-mini btn-primary btn-block edit">Edit</button></td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>CA</td>
                                                    <td>CAN</td>
                                                    <td>Canada</td>
                                                    <td>USA</td>                                    
                                                    <td><button class="btn btn-mini btn-primary btn-block edit">Edit</button></td>
                                                </tr>                               
                                            </tbody>
                                        </table>                                         
                                        
                                    </div>
                                </div>                                
                                
                                <div class="block">
                                    <div class="head">
                                        <h2>Add new row</h2>
                                        <ul class="buttons">
                                            <li><a href="#" onClick='$("#addRowExample tbody").prepend("<tr><td></td><td></td><td></td><td></td><td><button class=\"btn btn-mini btn-primary btn-block edit\">Edit</button></td></tr>").find("tr:first button.edit").trigger("click"); return false;'><span class="i-plus-2"></span></a></li>
                                        </ul>                                        
                                    </div>
                                    <div class="content np">
                                     
                                        <table cellpadding="0" cellspacing="0" width="100%" id="addRowExample" class="editable oc_disable">
                                            <thead>
                                                <tr>                                                    
                                                    <th width="50">ISO2</th>
                                                    <th width="50">ISO3</th>
                                                    <th>Name</th>                                                    
                                                    <th width="100">Region</th>                                    
                                                    <th width="50">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>                                                    
                                                    <td>AD</td>
                                                    <td>AND</td>
                                                    <td>Andorra</td>
                                                    <td>Europe</td>                                    
                                                    <td><button class="btn btn-mini btn-primary btn-block edit">Edit</button></td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>AR</td>
                                                    <td>ARG</td>
                                                    <td>Argentina</td>
                                                    <td>USA</td>                                    
                                                    <td><button class="btn btn-mini btn-primary btn-block edit">Edit</button></td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>BG</td>
                                                    <td>BGR</td>
                                                    <td>Bulgaria</td>
                                                    <td>Europe</td>                                    
                                                    <td><button class="btn btn-mini btn-primary btn-block edit">Edit</button></td>
                                                </tr>
                                                <tr>                                                                                                        
                                                    <td>BR</td>
                                                    <td>BRA</td>
                                                    <td>Brazil</td>
                                                    <td>USA</td>                                    
                                                    <td><button class="btn btn-mini btn-primary btn-block edit">Edit</button></td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>CA</td>
                                                    <td>CAN</td>
                                                    <td>Canada</td>
                                                    <td>USA</td>                                    
                                                    <td><button class="btn btn-mini btn-primary btn-block edit">Edit</button></td>
                                                </tr>                              
                                            </tbody>
                                        </table>                                         
                                        
                                    </div>
                                </div>                                
                                
                                <div class="block">
                                    <div class="head">
                                        <h2>Remove row with confirmation</h2>                                        
                                    </div>
                                    <div class="content np">
                                     
                                        <table cellpadding="0" cellspacing="0" width="100%" class="editable oc_disable">
                                            <thead>
                                                <tr>                                                    
                                                    <th width="50">ISO2</th>
                                                    <th width="50">ISO3</th>
                                                    <th>Name</th>                                                    
                                                    <th width="100">Region</th>                                    
                                                    <th width="50">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>                                                    
                                                    <td>AD</td>
                                                    <td>AND</td>
                                                    <td>Andorra</td>
                                                    <td>Europe</td>                                    
                                                    <td><button class="btn btn-mini btn-danger btn-block remove">Remove</button></td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>AR</td>
                                                    <td>ARG</td>
                                                    <td>Argentina</td>
                                                    <td>USA</td>                                    
                                                    <td><button class="btn btn-mini btn-danger btn-block remove">Remove</button></td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>BG</td>
                                                    <td>BGR</td>
                                                    <td>Bulgaria</td>
                                                    <td>Europe</td>                                    
                                                    <td><button class="btn btn-mini btn-danger btn-block remove">Remove</button></td>
                                                </tr>
                                                <tr>                                                                                                        
                                                    <td>BR</td>
                                                    <td>BRA</td>
                                                    <td>Brazil</td>
                                                    <td>USA</td>                                    
                                                    <td><button class="btn btn-mini btn-danger btn-block remove">Remove</button></td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>CA</td>
                                                    <td>CAN</td>
                                                    <td>Canada</td>
                                                    <td>USA</td>                                    
                                                    <td><button class="btn btn-mini btn-danger btn-block remove">Remove</button></td>
                                                </tr>                              
                                            </tbody>
                                        </table>                                         
                                        
                                    </div>
                                </div>                                
                                
                                <div class="block">
                                    <div class="head">
                                        <h2>All included</h2>
                                        <ul class="buttons">
                                            <li><a href="#" onClick='$("#allIncExample tbody").prepend("<tr><td></td><td></td><td></td><td></td><td><button class=\"btn btn-mini btn-primary edit\">Edit</button> <button class=\"btn btn-mini btn-danger remove\">Remove</button></td></tr>").find("tr:first button.edit").trigger("click"); return false;'><span class="i-plus-2"></span></a></li>
                                        </ul>                                           
                                    </div>
                                    <div class="content np">
                                     
                                        <table cellpadding="0" cellspacing="0" width="100%" class="editable" id="allIncExample">
                                            <thead>
                                                <tr>                                                    
                                                    <th width="50">ISO2</th>
                                                    <th width="50">ISO3</th>
                                                    <th>Name</th>                                                    
                                                    <th width="100">Region</th>                                    
                                                    <th width="95">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>                                                    
                                                    <td>AD</td>
                                                    <td>AND</td>
                                                    <td>Andorra</td>
                                                    <td>Europe</td>                                    
                                                    <td>
                                                        <button class="btn btn-mini btn-primary edit">Edit</button>
                                                        <button class="btn btn-mini btn-danger remove">Remove</button>
                                                    </td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>AR</td>
                                                    <td>ARG</td>
                                                    <td>Argentina</td>
                                                    <td>USA</td>                                    
                                                    <td>
                                                        <button class="btn btn-mini btn-primary edit">Edit</button>
                                                        <button class="btn btn-mini btn-danger remove">Remove</button>
                                                    </td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>BG</td>
                                                    <td>BGR</td>
                                                    <td>Bulgaria</td>
                                                    <td>Europe</td>                                    
                                                    <td>
                                                        <button class="btn btn-mini btn-primary edit">Edit</button>
                                                        <button class="btn btn-mini btn-danger remove">Remove</button>
                                                    </td>
                                                </tr>
                                                <tr>                                                                                                        
                                                    <td>BR</td>
                                                    <td>BRA</td>
                                                    <td>Brazil</td>
                                                    <td>USA</td>                                    
                                                    <td>
                                                        <button class="btn btn-mini btn-primary edit">Edit</button>
                                                        <button class="btn btn-mini btn-danger remove">Remove</button>
                                                    </td>
                                                </tr>
                                                <tr>                                                    
                                                    <td>CA</td>
                                                    <td>CAN</td>
                                                    <td>Canada</td>
                                                    <td>USA</td>                                    
                                                    <td>
                                                        <button class="btn btn-mini btn-primary edit">Edit</button>
                                                        <button class="btn btn-mini btn-danger remove">Remove</button>
                                                    </td>
                                                </tr>                              
                                            </tbody>
                                        </table>                                         
                                        
                                    </div>
                                </div>                                
                                
                            </div>
                        </div>                        
                        
                        
                    </div>                    
                    
                </div>
                
            </div>
            
        </div>

    </div>

    <div class="dialog" id="row_delete" style="display: none;" title="Delete?">
        <p>Row will be deleted</p>
    </div>       
    
</body>
</html>
